<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<style type="text/css">
    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #FFF;
        overflow: auto;
    }

    .autocomplete-suggestion {
        padding: 2px 5px;
        white-space: nowrap;
        overflow: hidden;
    }

    .autocomplete-selected {
        background: #F0F0F0;
    }

    .autocomplete-suggestions strong {
        font-weight: normal;
        color: #3399FF;
    }

    @-moz-document url-prefix() {
        fieldset {
            display: table-cell;
        }
    }

</style>
<title>推荐订单统计 - 云超市</title>
<%--<jsp:include page="../../head.jsp"/>--%>

<div class="" id="app">
    <form class="form-inline" name="myForm" style="margin-bottom:20px;margin-top: 10px;">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="cityNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="市局名称">
            </div>
            <div class="form-group">
                <input id="quXianNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="区县名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
                <div class="form-group">
                    <input id="channelNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                           placeholder="渠道名称">
                </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" onfocus="this.value=''" class="form-control input-sm" type="text"
                       placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>
        <div class="form-group">
            <input id="yearMonthInput" class="form-control input-sm" type="text"
                   placeholder="请输入年月">
        </div>
        <button type="button" class="btn btn-success btn-sm" @click="getOrder(1)"
                title="">查询
        </button>
    </form>

    <div class="row" style="background-color: rgb(53, 147, 202);margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">推荐订单统计</strong>
        </div>
        <div class="col-sm-2" style="text-align: right">

        </div>
    </div>
    <div class="table-responsive" id="tableContainer" style="font-size: 18px;">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color:#eee;">
            <tr>
                <th>年月</th>
                <th>客户经理</th>
                <th>客户总数</th>
                <th>推荐周次</th>
                <th>完成率</th>
                <th>偏离度(0-5)</th>
                <th>偏离度(5-15)</th>
                <th>偏离度(15-25)</th>
                <th>偏离度(25+)</th>
            </tr>
            </thead>
            <tbody>

            <tr v-for="(order, index) in orderList">
                <td>{{order.YEAR_MOTH}}</td>
                <td>{{order.SLSMAN_NAME}}</td>
                <td>{{order.CUST_CODE_COUNT}}</td>
                <td>{{order.TIME_COUNT}}</td>
                <td>{{computePC(order.CURRENT_ALREADY_COUNT, order.RECOMMEND_NUM_COUNT)}}</td>
                <td>{{order.DOD1}}</td>
                <td>{{order.DOD2}}</td>
                <td>{{order.DOD3}}</td>
                <td>{{order.DOD4}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="text-align: right;" id="pageDiv"></div>

    <form action="${contextPath}/shop/cust2ShopListExportExcel" method="post" id="exportExcel" style="display:none">
        <input type="hidden" name="stringMap['cityName']" :value="queryModel.cityName">
        <input type="hidden" name="stringMap['quXianName']" :value="queryModel.quXianName">
        <input type="hidden" name="stringMap['channelName']" :value="queryModel.channelName">
        <input type="hidden" name="stringMap['empName']" :value="queryModel.empName">
        <input type="hidden" name="stringMap['custName']" :value="queryModel.custName">
        <input type="hidden" name="stringMap['shopName']" :value="queryModel.shopName">
        <input type="hidden" name="stringMap['custCode']" :value="queryModel.custCode">
        <input type="hidden" name="stringMap['isExp']" :value="queryModel.isExp">
    </form>
</div>

<script src="${contextPath}/static/statistics/js/vue.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;

    var app = new Vue({
        el: '#app',
        data: {
            orderList: [],
            users: [],
            licenses: [],
            paths: [],
            queryModel: {
                yearMonth: '',
                cityName : '',
                quXianName : '',
                channelName : '',
                empName : '',
                page: '1',
            },
            isNew : '1',

        },
        methods: {
            getInitData: function () {
                var vm = this;

                $('#yearMonthInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 3,
                    forceParse: 0,
                    minView: 3,
                    showMeridian: 1,
                    format: "yyyy-mm",
                });
            },
            disposeQueryModel : function () {
                var vm = this;
                var yearMonth  = $("#yearMonthInput").val();
                var cityName = $("#cityNameInput").val();
                var quXianName = $("#quXianNameInput").val();
                var channelName = $("#channelNameInput").val();
                var empName = $("#empNameInput").val();

                vm.queryModel.yearMonth = yearMonth;
                vm.queryModel.cityName =cityName ;
                vm.queryModel.quXianName = quXianName;
                vm.queryModel.channelName = channelName;
                vm.queryModel.empName = empName;

            },
            getOrder: function (page) {
                var vm = this;
                layer.load(1);
                vm.queryModel.page = page;
                vm.disposeQueryModel();

                $.ajax({
                    url: '${contextPath}/shop/getRecommendStatisticsList',
                    type: 'post',
                    data: {
                        stringMap: vm.queryModel
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message)
                            return
                        }
                        //console.log(data)
                        var rData = data.data;
                        var dataArray = rData.recordList;
                        if (dataArray.length == 0) {
                            layer.msg("查询没有数据")
                        }
                        app.orderList = dataArray
                        laypage({
                            cont: 'pageDiv'
                            , pages: rData.pageCount //总页数
                            , groups: 5 //连续显示分页数
                            , curr: rData.currentPage
                            , skin: '#1E9FFF',
                            jump: function (obj, first) {
                                var curr = obj.curr;
                                if (!first) {
                                    app.getOrder(curr)
                                }
                            }
                        });
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg('网络错误');
                        if (window.console) console.log(error)
                    }
                })
            },
            exportExcel : function () {
                this.disposeQueryModel();
                $("#exportExcel").submit();
            },
            deleteData : function (yearMonth,week) {

                var indx = layer.confirm('确定要删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    layer.close(indx);
                    layer.load(1)
                    $.ajax({
                        url: '${contextPath}/shop/deleteDateMapping',
                        type: 'post',
                        data: {
                            stringMap : {
                                yearMonth : yearMonth,
                                week : week,
                            }
                        },
                        dataType: 'json',
                        success: function (data) {
                            if (data.success) {
                                app.getOrder(1);
                            }
                            layer.msg(data.message);
                            layer.closeAll('loading');
                        },
                        error: function (error) {
                            if (window.console) console.error(error);
                            layer.msg('网络错误');
                            layer.closeAll('loading');
                        }
                    });

                }, function () {
                });
            },
            computePC: function (ca, rn) { //这是个方法，却可以根据实参的变化而被动态调用，从而返回新的值，在显示处体现出来
                if (ca && ca != '0' && rn && rn != '0') {
                    return (ca / rn * 100).toFixed(2) + '%'
                }
                return ''
            },
            addData : function () {
                var yearMonth = $("#yearMonthInput").val();
                $("#add_yearMonth").val(yearMonth);

                $("#add_yearMonth").attr("disabled",false);
                $("#add_week").attr("disabled",false);

                var week = $("#weekInput").val();
                $("#add_week").val(week);

                this.isNew = '1';
                $('#myModal').modal('show');
            },
            editData : function (yearMonth,week,beginDate,endDate) {
                $("#add_yearMonth").val(yearMonth);
                $("#add_week").val(week);
                $("#add_yearMonth").attr("disabled",true);
                $("#add_week").attr("disabled",true);
                $("#add_beginDate").val(beginDate);
                $("#add_endDate").val(endDate);
                this.isNew = '0';
                $('#myModal').modal('show');
            },
            submitData: function () {
                var yearMonth = $("#add_yearMonth").val();
                var week = $("#add_week").val();
                var beginDate = $("#add_beginDate").val();
                var endDate = $("#add_endDate").val();

                if (!yearMonth) {
                    layer.msg('请选择年月');
                    return;
                }
                if (!week) {
                    layer.msg('请选择周');
                    return;
                }
                if (!beginDate) {
                    layer.msg('请选择开始时间');
                    return;
                }
                if (!endDate) {
                    layer.msg('请选择结束时间');
                    return;
                }
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/shop/addDateMappingData',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: {
                            yearMonth : yearMonth,
                            week : week,
                            beginDate : beginDate,
                            endDate : endDate,
                            isNew :app.isNew,
                        }
                    },
                    //async : false,
                    success: function (data) {
                        layer.closeAll('loading');
                        layer.msg(data.message);
                        if (data.success) {
                            $('#myModal').modal('hide')
                            app.getOrder(1);
                        }

                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        if (window.console) console.error(error);
                        layer.msg('网络错误');
                    }
                });


            },
            
        },
    })
    app.getInitData();
    app.getOrder(1);

    var cityNode, quXianNode, channelNode, empNode, custNode, shopNode;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>

    organization_tree('${contextPath}', cityNode, quXianNode, channelNode, empNode, custNode, shopNode);
</script>


